<template>
  <div>
    <div class="head">
      <el-button-group class="button">
        <el-button @click="handleAddTable" type="primary" icon="el-icon-circle-plus">添加表</el-button>
        <el-button @click="handleRelative" type="success" icon="el-icon-edit-outline">表关系</el-button>
        <el-button @click="handleInitDatabase" type="warning" icon="el-icon-edit-outline">初始化数据库</el-button>
      </el-button-group>

    </div>
    <div class="content">
      <el-table
        :data="tableData"
        style="width: 100%"
        :row-class-name="tableRowClassName"
      >
        <el-table-column
          type="index"
          >
        </el-table-column>
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-table
            :data="props.row.rows"
            style="width: 100%"
            >
              <el-table-column
                type="index"
              >
              </el-table-column>
              <el-table-column
                label="字段名"
                prop="name"
              >
              </el-table-column>
              <el-table-column
                label="java类型"
                prop="type"
              >
              </el-table-column>
              <el-table-column
                label="长度"
                prop="length"
              >
              </el-table-column>
              <el-table-column
                label="描述"
                prop="desc"
              >
              </el-table-column>

            </el-table>
          </template>
        </el-table-column>
        <el-table-column
          v-for="(item, index) in tables"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          >
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button-group>
            <el-button @click="handleDelete(scope.row)" type="warning" size="mini">删除</el-button>
            <el-button @click="handleUpdate(scope.row)" type="success" size="mini">修改</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>

    </div>
  </div>
</template>

<script>
export default {
  name: 'List',
  data () {
    return {
      api: {
        list: this.$api.database.tableList,
        delete: this.$api.database.deleteTable
      },
      tables: [
        {
          prop: 'realTableName',
          label: '表名'
        },
        {
          prop: 'createDate',
          label: '创建时间'
        }
      ],
      formInline: {
        user: '',
        region: ''
      },
      tableData: []
    }
  },
  methods: {
    tableRowClassName ({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    },
    onSubmit () {
      alert(1)
    },
    handleAddTable () {
      this.$router.push('/database/add')
    },
    handleRelative () {
      window.sessionStorage.tables = JSON.stringify(this.tableData)
      this.$router.push('/database/relative')
    },
    handleInitDatabase () {
      this.$router.push('/database/init')
    },
    handleListTable () {
      this.$httpf({ url: this.api.list }, data => {
        this.tableData = data.data.data.tables
      })
    },
    handleDelete (row) {
      this.$httpf({ url: this.api.delete, paras: { realTableName: row.realTableName } }, data => {
        this.handleListTable()
      })
    },
    handleUpdate (row) {
      window.sessionStorage.tableName = row.realTableName
      this.$router.push('/database/update')
    }
  },
  created () {
    this.handleListTable()
  }

}
</script>

<style scoped>
  .head {
    margin-top: 20px;
    box-sizing: border-box;
    padding-left: 20px;
  }
  .content {
    padding: 0 20px;
  }
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
  .button {
    margin-bottom: 10px;
  }
  .demo-form-inline{
  }
</style>
